<!DOCTYPE HTML>
<html>
<head>
    <title>Projekktor - Design Template</title>
    <style type="text/css">
    body { background-color: #fdfdfd; padding: 10px; margin: 0; color:#000; font: 13px/18px monospace; }

    .projekktor {
        border: 1px dashed green;
        padding: 10px;
        width: 800px;
    }

    .pplogo {
        width: 50px;
        height: 50px;
        background-color: #30FCFC;
    }

    /*
        in case you add the class "fade" to your control-bar make sure it is
        also set invisible once inactive - e.g. via "display: none / block"
    */

    .ppcontrols {
        padding: 10px;
        margin: 5px;
    }

    .ppcontrols.inactive {
        background-color: transparent;
        border: 1px solid red;
        color: #333333;
        /* display: none;  */
    }

    .ppcontrols.active {
        background-color: transparent;
        border: 1px solid green;
        color: #333333;
        /* display: block;  */
    }


    .inactive {
        color: #333333;
        background-color: #ccc;
    }

    .active {
        background-color: green;
        color: #fdfdfd;
    }

    /*
        if you want the display to stretch on "fullscreen" mode you
        have to work with relative dimensions and absolute positioning
    */
    .ppdisplay {
        width: 200px;
        height: 200px;
        position: relative;
        display: block;
        background-color: #FF1EB0;
        margin: 10px;
    }

    .ppvslider, .ppscrubber {
        width: 350px;
        height: 25px;
        border: 1px solid blue;
        position: relative;
    }

    .ppvmarker, .pploaded, .ppplayhead {
        background-color: blue;
        height: 25px;
        position: absolute !important;
        cursor: pointer;
    }

    .ppplayhead {
        background-color: red;
    }

    .ppvknob {
        border: 1px solid #000;
        height: 25px;
        width: 5px;
        position: absolute;
        cursor: pointer;
    }

    </style>

    <!-- Load jquery -->
    <script type="text/javascript" src="jquery.min.js"></script>

    <!-- load projekktor -->
    <script type="text/javascript" src="projekktor.min.js"></script>

</head>
<body>

<div id="player_a" class="projekktor">

    <!-- display holds all visual media elements to be played back -->
    <div class="ppdisplay"></div>

    <!-- and optional logo the operator may set -->
    <img class="pplogo" src="yourlogo.png" />

    <!-- the buffering-indicator - typically an animated gif or something -->
    <div class="ppbuffering">buffering</div>

    <!-- the start button - typically centered to "display" -->
    <div class="ppstart">start</div>



    <!-- Adding the class "fade" to "ppcontrols" will cause the controlbar-DOM to: -->
    <!-- 1. Be invisible if player is IDLE -->
    <!-- 2. Fade in on mouse over player -->
    <!-- 3. Fade out if mouse leaves player -->
    <!-- Make sure you set appropriate .active and .inactive CSS then (see design.css) -->

    <!-- controlbar / wrapping it up this way is optional-->
    <div class="ppcontrols">

    <b>controlbar plugin:</b>

    <h3 class="pptitle">title display</h3>

    <div class="ppplay">play</div>

    <div class="pppause">pause</div>

    <div class="ppstop">stop</div>

    <div class="ppprev">prev</div>

    <div class="ppnext">next</div>

    <div class="pprewind">rewind</div>

    <div class="ppforward">forward</div>

    <div class="ppfsexit">exit fullscreen</div>

    <div class="ppfsenter">enter fullscreen</div>

    <div class="pploopon">loop ON</div>

    <div class="pploopoff">loop OFF</div>

    <b>scrubber / time control</b>

    <!-- start: scrubber bar -->
    <div class="ppscrubber"> <!-- the rail  -->
        <div class="pploaded"></div> <!-- percent buffered indicator (width in %), clickable -->
        <div class="ppplayhead"></div> <!-- percent elapsed / playhead position (width in %), clickable -->
    </div>
    <!-- end: scrubber bar -->

    <p>
        Duration  : <span class="pphr_dur"></span> hours <span class="ppmin_dur"></span> minutes and <span class="ppsec_dur"></span> seconds<br/>
        Remaining : <span class="pphr_rem"></span> hours <span class="ppmin_rem"></span> minutes and <span class="ppsec_rem"></span> seconds<br/>
        Elapsed   : <span class="pphr_elp"></span> hours <span class="ppmin_elp"></span> minutes and <span class="ppsec_elp"></span> seconds<br/>
    </p>


    <b>volume control</b>

    <!-- start: volume slider -->
    <div class="ppvslider"> <!-- the rail, clickable -->
        <div class="ppvmarker"></div> <!-- value indicator bar (width in %), clickable -->
        <div class="ppvknob"></div> <!-- draggable knob -->
    </div>
    <!-- end: volume slider -->


    <!-- adding the class "toggle" to one or more of the following DOMs will -->
    <!-- toggle them accordingly to their function and current volume -->
    <!-- e.g. "mute" will be set to "inactive" if volume is "0" because at volume zero -->
    <!-- the player is already muted. -->

    <div class="ppmute">mute</div>

    <div class="ppvmax">maximum volume</div>

    <div class="ppunmute">unmute (restore volume)</div>


    </div>
</div>


<script type="text/javascript">

    // instantiate Projekktor
    $(document).ready(function() {
    projekktor('#player_a', {
        width: false,               // prevent auto-resizeing of player DOM
        height: false,              // prevent auto-resizeing of player DOM
        cssClassPrefix: 'pp',         // pp => "Projekktor Player" (default)
        title: 'Lorem Ipsum TV',        // some dummy title
        controls: true,            // controls are disabled (inactive) if set to FALSE
        autoplay: false,             // autoplay sometimes saves one click while testing new layouts
        poster: 'layout-grid.gif',

        // this playlist adds a dummy video with a duration of 2 hours:
        playlist: [
        {
            0:{src:'layout-grid.gif', type:'image/gif'},
            config: {
            duration: 7200,
            title: 'Lorem Ipsum TV'
            }
        }
        ]
        // if you prefer a real video uncomment and customize this:
        /*
        playlist: [
        {
            0:{src:'intro.ogv', type:'video/ogg'},
            1:{src:'intro.mp4', type:'video/mp4'},
            2:{src:'intro.webm', type:'video/webm'},
            config: {
            title: 'Lorem Ipsum TV'
            }
        }
        ]
        */
    });
    });

</script>
</body>
</html>
